<template>
  <div>
    <!-- 处理中查看 处理完成查看  同一弹框 -->
    <el-drawer
      v-model="state.centerDialogVisible"
      size="60%"
      :with-header="true"
      @open="openDialog"
    >
      <template #header>
        <p class="look_info">查看详情</p>
      </template>
      <!-- 已处理图标 -->
      <div class="ycl" v-if="state.dealStatus > 1">
        <svg-icon icon-class="ycl-icon" />
      </div>
      <p
        class="oneline"
        style="
           {
            font-size: 18px;
            color: '#ccc';
          }
        "
      >
        基本信息
      </p>

      <el-form
        :model="formInline"
        :inline="true"
        ref="formInlineRef"
        :rules="rulesData"
        class="demo-form-inline"
        label-width="150px"
      >
        <el-form-item label="项目名称">
          <el-input v-model="formInline.projectName" disabled />
        </el-form-item>

        <el-form-item label="创建人">
          <el-input v-model="formInline.createUserName" disabled />
        </el-form-item>
        <el-form-item label="状态">
          <el-input v-model="formInline.dealStatus" disabled />
        </el-form-item>
        <el-form-item label="检查内容">
          <el-input v-model="formInline.checkContent" disabled />
        </el-form-item>
        <el-form-item label="检查单位">
          <el-input v-model="formInline.checkCompanyName" disabled />
        </el-form-item>
        <!-- <el-form-item label="附件" class="oneline">
          <FileMinioUpload
            :restriction="true"
            :restrictionLimit="9"
            @updateFiles="updateproblemFiles"
            v-model:file="formInline.problemFiles"
          ></FileMinioUpload>
        </el-form-item> -->
        <p class="oneline" style="font-size: 18px; color: #ccc">整改通知</p>
        <el-form-item label="问题分类">
          <el-cascader
            v-model="formInline.problemCategory"
            :options="state.optionsArr"
            :props="state.props"
            :disabled="state.dealStatus == 3"
            @change="changeProblemCategory"
          />
        </el-form-item>
        <el-form-item label="问题描述">
          <el-input
            v-model="formInline.problemDescription"
            :disabled="state.dealStatus == 3"
          />
        </el-form-item>
        <el-form-item label="问题类型">
          <el-cascader
            v-model="formInline.problemType"
            :options="state.options"
            :props="state.props"
            :disabled="state.dealStatus == 3"
          />
        </el-form-item>
        <el-form-item label="建议解决方案" class="oneline">
          <el-input
            v-model="formInline.solutionRemark"
            :disabled="state.dealStatus == 3"
          />
        </el-form-item>
        <el-form-item label=""> </el-form-item>
        <el-form-item label="处理说明" class="oneline" prop="dealExplain">
          <el-input
            v-model="formInline.dealExplain"
            :disabled="state.dealStatus == 3"
            show-word-limit
            type="textarea"
          />
        </el-form-item>
        <el-form-item label="附件" class="oneline">
          <!-- files   -->
          <FileMinioUpload
            :restriction="true"
            :restrictionLimit="9"
            @updateFiles="updateFiles"
            v-model:files="formInline.files"
            :disabled="state.dealStatus == 3"
          />
        </el-form-item>
        <el-form-item label="抄送相关人员" class="oneline">
          <!-- copyUserIds -->
          <!-- @change="changeProject" -->
          <el-select
            v-model="formInline.copyUserIds"
            clearable
            class="select_project"
            multiple
            placeholder="请选择相关人员"
            :disabled="state.dealStatus == 3"
          >
            <el-option
              v-for="item in state.projectOptionsArr"
              :key="item.projectId"
              :label="item.projectName"
              :value="item.projectId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="验收状态" class="oneline">
          <!-- copyUserIds -->
          <el-radio-group
            v-model="formInline.checkStatus"
            :disabled="state.dealStatus == 3"
          >
            <el-radio :label="-1">未验收</el-radio>
            <el-radio :label="1">已验收</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <p
        class="oneline"
        style="font-size: 18px;color: #ccc;"
      >
        历史记录
      </p>
      <el-timeline
        v-if="state.getHistoryList && state.getHistoryList.length > 0"
      >
        <el-timeline-item
          v-for="item in state.getHistoryList"
          :key="item.operateTime"
          :timestamp="item.operateTime"
          placement="top"
        >
          <el-card>
            <h4>{{ item.departmentName }} {{ item.userName }}</h4>
            <p>
              {{ filterStatus(item.type) }}
              <span class="span_sty">
                {{ item.qualityProblemName }}——{{ item.result }}
              </span>
              {{ item.operateTime }}
            </p>
          </el-card>
        </el-timeline-item>
      </el-timeline>
      <div class="btn_box">
        <el-button @click="closeHandler"  class="button_cancel">关闭</el-button>
        <el-button
          v-if="state.dealStatus !== 3"
          @click="inProcessHandler(formInlineRef)"
          class="button_view"
          >保存</el-button
        >

        <el-button
          v-if="state.dealStatus !== 3"
          @click="checkHandler(formInlineRef)"
          class="button_view"
          >处理完成</el-button
        >
      </div>
    </el-drawer>
  </div>
</template>
<script setup>
import '@/views/constructionProjectManage/static/button.scss'
import FileMinioUpload from "@/components/FileMinioUpload.vue";
import { qualitySupervision } from '@/api/project'
import { ref, reactive, computed } from 'vue'
import {
  ElCascader,
  ElTimelineItem,
  ElTimeline,
  ElCard,
  ElButton,
  ElForm,
  ElDrawer,
  ElFormItem
} from 'element-plus'
// <!-- 1处理中2已处理 -->
const state = reactive({
  centerDialogVisible: false,
  title: computed(() => {
    switch (state.dealStatus) {
      case 1: //处理中
        break
      case 2: //已处理
        break

      default:
        break
    }
  }),
  dealStatus: 1,
  qualityProblemId: '',
  getHistoryList: [],
  options: [],
  props: {
    label: 'problemName',
    value: 'problemId'
  },
  projectOptionsArr: [] //人员列表
})
//过滤器
function filterStatus(status) {
  // 1创建2查询3删除4修改5处理6验收成功7验收失败
  switch (status) {
    case 1:
      return '创建'
      break
    case 2:
      return '查询'
    case 3:
      return '删除'
    case 4:
      return '修改'
    case 5:
      return '处理'
    case 6:
      return '验收成功'
    case 7:
      return '验收失败'
      break
    default:
      break
  }
}
const rulesData = reactive({
  dealExplain: [{ required: true, message: '项目不能为空', trigger: 'blur' }]
})
const formInlineRef = ref(null)
const formInline = reactive({
  projectName: '',
  createUserName: '',
  dealStatus: '',
  checkContent: '',
  checkCompanyName: '',
  // problemFiles: [],
  problemCategory: '',
  problemDescription: '',
  problemType: '',
  solutionRemark: '',
  dealExplain: '',
  files: [],
  copyUserIds: [],
  checkStatus: 1
})
//附件2上传成功
const updateFiles = (list) => {
  console.log(list)
}
//附件1上传成功
const updateproblemFiles = (list) => {
  console.log(list)
}
//关闭
const closeHandler = () => {
  state.centerDialogVisible = false
}
//处理成功
const checkHandler = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      let submitObj = {
        qualityProblemId: state.qualityProblemId,
        dealExplain: formInline.dealExplain,
        files: formInline.files,
        copyUserIds: formInline.copyUserIds||[]
      }
      //处理提交
      qualitySupervision.dealProblem(submitObj).then((res) => {
        const { data, code, msg } = res
        if (code == '200') {
          state.centerDialogVisible = false
          // emits('getsearch')
        }
      })
    }
  })
}
//选择变化
const changeProblemCategory = (val) => {
  getTypeList(val)
}
//保存
const inProcessHandler = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      let submitObj = {
        qualityProblemId: state.qualityProblemId,
        dealExplain: formInline.dealExplain,
        copyUserIds: formInline.copyUserIds||[]
      }
      //处理提交
      qualitySupervision.dealsave(submitObj).then((res) => {
        const { data, code, msg } = res
        if (code == '200') {
          state.centerDialogVisible = false
          // emits('getsearch')
        }
      })
    }
  })
}
//打开回调
const openDialog = () => {
  qualitySupervision.getAndDealDetail(state.qualityProblemId).then((res) => {
    const { code, data, msg } = res
    if (code == 200) {
      Object.assign(formInline, data)
      formInline.checkStatus = formInline.checkStatus || -1
    }
  })
  //获取历史记录
  getHistory()
  //获取列表
  getTypeList()
}
const getTypeList = (id = '') => {
  qualitySupervision.type(id).then((res) => {
    const { code, data, msg } = res
    if (code == 200) {
      if (id) {
        state.options = data
      } else {
        state.optionsArr = data
      }
    }
  })
}
const getHistory = () => {
  qualitySupervision.history(state.qualityProblemId).then((res) => {
    const { code, data, msg } = res
    if (code == 200) {
      state.getHistoryList = data
    }
  })
}
defineExpose({
  state
})
</script>
<style lang="scss" scoped>
.look_info {
  font-size: 18px;
  font-weight: bold;
}
.oneline {
  width: 100%;
}
h4,
.span_sty {
  color: #fc7018;
}
.btn_box {
  text-align: center;
  margin-top: 20px;
}
.ycl {
  margin-bottom: 20px;
  width: 100%;
  text-align: right;
  height: 110px;
  svg {
    width: 110px;
    height: 110px;
  }
}
@import '@/assets/general_style/dialog.scss';
</style>
